<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>设置</title>
		
		<link rel="stylesheet" href="../plugings/layui/css/layui.css" />
	</head>
	
	<body>
		<table class="layui-table" lay-size="sm" style="text-align: center;">
			<colgroup>
				<col width="150">
				<col width="200">
			</colgroup>
			<tbody>
				<tr>
					<td>字体</td>
					<td>
						<select id="fontFamily" onchange="setFontFamily()">
							<option value="">DEFAULT</option>
							<option value="Bahnschrift">Bahnschrift</option>
							<option value="Cambria Math">Cambria Math</option>
							<option value="Consolas">Consolas</option>
							<option value="Courier New">Courier New</option>
							<option value="Georgia">Georgia</option>
							<option value="Ink Free">Ink Free</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>字体大小</td>
					<td>
						<input id="fontSize" type="range" min="4" max="36" onchange="setFontSize()" />
					</td>
				</tr>
				<tr>
					<td>主题</td>
					<td>
						<select id="theme" onchange="setTheme()">
							<option value="chrome">Chrome</option>
							<option value="clouds">Clouds</option>
							<option value="dawn">Dawn</option>
							<option value="dreamweaver">Dreamweaver</option>
							<option value="eclipse">Eclipse</option>
							<option value="github">GitHub</option>
							<option value="iplastic">Iplastic</option>
							<option value="solarized_light">Solarized Light</option>
							<option value="textmate">TextMate</option>
							<option value="tomorrow">Tomorrow</option>
							<option value="kuroir">Kuroir</option>
							<option value="katzenmilch">KatzenMilch</option>
							<option value="sqlserver">SQL Server</option>
							<option value="ambiance">Ambiance</option>
							<option value="chaos">Chaos</option>
							<option value="clouds_midnight">Clouds Midnight</option>
							<option value="dracula">Dracula</option>
							<option value="cobalt">Cobalt</option>
							<option value="gruvbox">Gruvbox</option>
							<option value="gob">Green on Black</option>
							<option value="idle_fingers">idle Fingers</option>
							<option value="kr_theme">krTheme</option>
							<option value="merbivore">Merbivore</option>
							<option value="merbivore_soft">Merbivore Soft</option>
							<option value="mono_industrial">Mono Industrial</option>
							<option value="monokai">Monokai</option>
							<option value="pastel_on_dark">Pastel on dark</option>
							<option value="solarized_dark">Solarized Dark</option>
							<option value="terminal">Terminal</option>
							<option value="tomorrow_night">Tomorrow Night</option>
							<option value="tomorrow_night_blue">Tomorrow Night Blue</option>
							<option value="tomorrow_night_bright">Tomorrow Night Bright</option>
							<option value="tomorrow_night_eighties">Tomorrow Night 80s</option>
							<option value="twilight">Twilight</option>
							<option value="vibrant_ink">Vibrant lnk</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>滚动速度</td>
					<td>
						<input id="scrollSpeed" type="range" min="1" max="10" />
					</td>
				</tr>
				<tr>
					<td>滚动超距</td>
					<td>
						<input type="radio" name="scrollPastEnd" value="0" title="None"> None
						<input type="radio" name="scrollPastEnd" value="0.5" title="Half"> Half
						<input type="radio" name="scrollPastEnd" value="1" title="Full"> Full
					</td>
				</tr>
				<tr>
					<td>只读</td>
					<td>
						<input id="readOnly" type="checkbox" />
					</td>
				</tr>
				<tr>
					<td>显示行号</td>
					<td>
						<input id="showLineNumbers" type="checkbox" />
					</td>
				</tr>
				<tr>
					<td>显示文本长度辅助线</td>
					<td>
						<input id="showPrintMargin" type="checkbox" onchange="setShowPrintMargin()" />
					</td>
				</tr>
				<tr id="showPrintMarginTr">
					<td>文本长度辅助线的位置</td>
					<td>
						<input id="printMarginColumn" type="number" min="1" max="300" onchange="setPrintMarginColumn()" />
					</td>
				</tr>
			</tbody>
		</table>
	</body>
	
	<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../plugings/layui/layui.all.js"></script>
	
	<script type="text/javascript" src="../config/config-editor.js"></script>
	
	<script>
		$(function() {
			$('#fontFamily').val(editorSetting.fontFamily);
			$('#fontSize').val(editorSetting.fontSize);
			$('#theme').val(editorSetting.theme);
			$('#scrollSpeed').val(editorSetting.scrollSpeed);
			$('input[name=scrollPastEnd]').each(function() {
				if (editorSetting.scrollPastEnd == $(this).val()) {
					$(this).attr('checked', 'checked');
				}
			});
			if (editorSetting.readOnly) $('#readOnly').attr('checked', 'checked');
			if (editorSetting.showLineNumbers) $('#showLineNumbers').attr('checked', 'checked');
			if (editorSetting.showPrintMargin) {
				$('#showPrintMargin').attr('checked', 'checked');
			} else {
				$('#showPrintMarginTr').css('display', 'none');
			}
			$('#printMarginColumn').val(editorSetting.printMarginColumn);
		});
		
		function setFontFamily() {
			var fontFamily = $('#fontFamily').val();
			parent.editor.setOptions({fontFamily: fontFamily});
		}
		
		function setFontSize() {
			var fontSize = $('#fontSize').val();
			parent.editor.setFontSize(parseInt(fontSize));
		}
		
		function setTheme() {
			var theme = $('#theme').val();
			parent.editor.setTheme("ace/theme/" + theme);
		}
		
		function setShowPrintMargin() {
			var flag = $('#showPrintMargin').attr('checked');
			parent.editor.setShowPrintMargin(flag);
			if (flag) {
				$('#showPrintMarginTr').css('display', '');
			} else {
				$('#showPrintMarginTr').css('display', 'none');
			}
		}
		
		function setPrintMarginColumn() {
			var printMarginColumn = $('#printMarginColumn').val();
			parent.editor.setPrintMarginColumn(parseInt(printMarginColumn));
		}
	</script>
	
</html>
